<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			.mui-table-view-cell.mui-active {
				background-color: inherit;
			}
			.mui-table-view-cell:after {
				background-color: inherit;
			}
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			
			.bg{
				background: url(images/account-promotion.jpg) no-repeat top center;
				background-size: cover;
			}
			.bg.mui-table-view.mui-grid-view li.mui-col-xs-6{
				background-color: rgba(255,255,255,.9);
			}
			.bg .bg-cell{
				height: 100px;
			}
			
			#qrcode {
				width: 120px;
				height: 120px;
				margin: 20px auto;
			}
			.title{
				margin-bottom: 5px;				
			}
			.btn-copy{
				position: relative;
			}
			.btn-copy button{
				position: absolute;
				right: 20px;
				bottom: 32px;
				font-size: 12px;
				padding: 4px 8px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<button type="button" id="list" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">记录</button>
			<h1 class="mui-title">推广赚钱</h1>
		</header>	
		<div class="mui-content mui-text-center">
			<ul class="mui-table-view mui-grid-view bg">
				<li class="mui-table-view-cell mui-col-xs-12 bg-cell"></li>
				<li class="mui-table-view-cell mui-col-xs-6">
					<div>累计收益</div>
					<h4><span class="price-up-text" id="TotalAmount">-</span> 元</h4>
				</li>
				<li class="mui-table-view-cell mui-col-xs-6">
					<div>成功邀请</div>
					<h4><span id="TotalMember">-</span> 人</h4>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell btn-copy">
					<div class="title">分享专属邀请二维码</div>
					<h1 id="qrcode"></h1>
					<button class="mui-btn-danger" id="btnSaveQR">保存</button>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell btn-copy copy">
					<div class="title">分享专属邀请链接</div>
					<input type="text" id="url" readonly="readonly" value="" />
					<button class="mui-btn-danger" data-target="url">复制</button>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell btn-copy copy">
					<div class="title">您的邀请码</div>
					<input type="text" id="code" readonly="readonly" value="" />
					<button class="mui-btn-danger" data-target="code">复制</button>
				</li>
			</ul>	
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="libs/qrcode.min.js" ></script>
		<script src="libs/clipboard.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">		
			var ws=null,wn=null;
			var bitmap=null;

			function saveQR() {
				//生成base64图片数据
				var canvas = document.getElementsByTagName("canvas")[0];
				var dataUrl = canvas.toDataURL();
				console.log(dataUrl);  
				var b = new plus.nativeObj.Bitmap();
	 
				b.loadBase64Data(dataUrl, function() {
					console.log("创建成功");
					b.save('_doc/' + app.account() + '.png', { overwrite: true, quality:100 }, function() {
						console.log("保存成功");
						plus.gallery.save('_doc/' + app.account() + '.png', function() {
							console.log("保存图片到相册成功");
							mui.toast("二维码保存成功");
						}, function() {
							console.log("保存图片到相册失败");
						});
						b.clear();
					}, function() {
						console.log("保存失败");
						b.clear();
					});
				}, function() {
					console.log("创建失败");
				});				
			}

			$id("btnSaveQR").addEventListener('tap',function () {
				wn.evalJS("saveQR()");
			})

			$id("list").addEventListener('tap', function () {
				mui.openWindow("account-promotion-list.html", "account-promotion-list");
			})
						
			var account;
			var qr = new QRCode(document.getElementById("qrcode"), {
					    //text: qrcode,
					    width: 120,
					    height: 120,
					    colorDark : "#000000",
					    colorLight : "#ffffff",
					    correctLevel : QRCode.CorrectLevel.H
				});
				
			mui(".copy").on("tap", "button", function () {
				var Context = plus.android.importClass("android.content.Context");
                    var main = plus.android.runtimeMainActivity();
                    var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
                    plus.android.invoke(clip,"setText",$id(this.getAttribute("data-target")).value);
                mui.toast("复制成功");
			})
									
			init = function(){							
				plus.nativeUI.showWaiting();
				
				var code = app.getUserInfo().ReferrerCode;
				
				qr.makeCode("http://www.chinahdfe.com/app/reg.html?code=" + code);				
				document.getElementById("code").value = code;
				$id("url").value = "http://www.chinahdfe.com/app/reg.html?code=" + code;
				 
				app.post("GetTradeFeeAwardStat", {}, function (data) {
					console.log(JSON.stringify(data));
					document.getElementById("TotalAmount").innerText = data.Table[0].TotalAmount.toFixed(2);
					document.getElementById("TotalMember").innerText = data.Table[0].TotalMember;
				});
				
				// 预创建新Webview窗口
				wn=plus.webview.open('account-promotion-qr.html', "account-promotion-qr", {zindex:-1});//
				wn.addEventListener('loaded', function(e){
					//生成base64图片数据
					var canvas = document.getElementsByTagName("canvas")[0];
					var dataUrl = canvas.toDataURL();
					wn.evalJS("drawQR('" + dataUrl + "')")
				}, false);
			};
						
			mui.plusReady(function(){
				init();
			});
		</script>
	</body>

</html>